
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<!--定义一个layui表单-->
<div class="layui-form layuimini-form">
    <!--定义一个layui表单项-->
    <div class="layui-form-item">
        <!--定义一个必填项标签-->
        <label class="layui-form-label required">姓名</label>
        <!--定义一个layui输入框块-->
        <div class="layui-input-block">
            <!--定义一个文本输入框，用于输入姓名-->
            <input type="text" name="engineerName" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名" value="" class="layui-input">
        </div>
    </div>
    <!--定义一个layui表单项-->
<div class="layui-form-item">
    <!--定义一个必填项标签-->
    <label class="layui-form-label required">手机号</label>
    <!--定义一个layui输入框块-->
    <div class="layui-input-block">
        <!--定义一个数字输入框，用于输入手机号-->
        <input type="number" name="engineerPhone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机" value="" class="layui-input">
    </div>
</div>

<!--定义一个layui表单项-->
<div class="layui-form-item">
    <!--定义一个必填项标签-->
    <label class="layui-form-label required">派单等级</label>
    <!--定义一个layui两列的栅格布局-->
    <div class="layui-col-md2">
        <!--定义一个下拉选择框，用于选择派单等级-->
        <select name="engineerLevel" lay-verify="required" lay-reqtext="请设置派单等级！！">
            <!--定义一个空选项-->
            <option value="">请选择</option>
            <!--定义一些选项值-->
            <option value=0>0</option>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
        </select>
    </div>
</div>




<!--定义一个layui表单项，并设置其id为"area-picker"-->
<div class="layui-form-item" id="area-picker">

    <!--定义一个必填项标签-->
    <div class="layui-form-label required">居住地址</div>
    <!--定义一个layui内联输入框，并设置宽度为200px-->
    <div class="layui-input-inline" style="width: 200px;">
        <!--定义一个下拉选择框，用于选择省份-->
        <select name="engineerProvince"  lay-verify="required" lay-reqtext="至少省份不能为空，除非你是超人" class="province-selector" data-value="" lay-filter="province-1">
            <!--定义一个空选项-->
            <option value="">请选择省</option>
        </select>

    </div>
    <!--定义一个layui内联输入框，并设置宽度为200px-->
    <div class="layui-input-inline" style="width: 200px;">
        <!--定义一个下拉选择框，用于选择市-->
        <select name="engineerCity" class="city-selector" data-value="" lay-filter="city-1">
            <!--定义一个空选项-->
            <option value="">请选择市</option>
        </select>
    </div>
    <!--定义一个layui内联输入框，并设置宽度为200px-->
    <div class="layui-input-inline" style="width: 200px;">
        <!--定义一个下拉选择框，用于选择区-->
        <select name="engineerArea"  class="county-selector" data-value="" lay-filter="county-1">
            <!--定义一个空选项-->
            <option value="">请选择区</option>
        </select>

    </div>
</div>

<!--定义一个layui表单项-->
<div class="layui-form-item">
    <!--定义一个表单标签-->
    <label class="layui-form-label">个人描述</label>
    <!--定义一个layui输入框块-->
    <div class="layui-input-block">
        <!--定义一个电子邮件输入框，用于输入个人描述-->
        <input type="email" name="engineerDescription" placeholder="请输入个人描述" value="" class="layui-input">
    </div>
</div>

<!--定义一个layui表单项-->
<div class="layui-form-item">
    <div class="layui-input-block">
        <!--定义一个确认保存按钮-->
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
    </div>
</div>
</div>
<!--引入layui脚本-->
<script src="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<!--引入lay-config脚本-->
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    //使用layui模块
    layui.use(['form','layarea','layer'], function () {
        //初始化layui模块
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            layarea = layui.layarea;

        //渲染地址选择器
        layarea.render({
            elem: '#area-picker',
            //当选择结果发生变化时执行的回调函数
            change: function (res) {
                //打印选择结果
                console.log(res);
            }
        });

        //监听提交按钮的点击事件
        form.on('submit(saveBtn)', function (data) {
            //将表单数据转换为JSON字符串
            var dataJson = JSON.stringify(data.field);

            //发送Ajax请求
            $.ajax({
                //请求URL
                url: 'http://localhost:8080/engineer/add',
                //请求类型为POST
                type: 'POST',
                //设置请求头的Content-Type为application/json;charset=UTF-8
                contentType: "application/json;charset=UTF-8",
                //发送的数据为dataJson
                data: dataJson,
                //请求成功时的回调函数
                success: function(response) {
                    //处理成功响应
                    //显示添加成功的提示消息
                    layer.msg('添加成功', function(){
                        setTimeout(function(){
                            // 关闭表单的逻辑
                            // 关闭当前页面;
                        }, 200);
                    });
                    //关闭窗口
                    window.close();
                },
                //请求失败时的回调函数
                error: function(xhr, status, error) {
                    //显示添加失败的提示消息
                    layer.msg('添加失败', function(){
                        setTimeout(function(){
                            // 关闭表单的逻辑
                            //关闭当前页面
                            window.close();
                        }, 200);
                    });
                }
            });

            //关闭窗口
            window.close();

            //阻止表单的默认提交行为
            return false;
        });

    });
</script>
</body>
</html>